<template>
  <div class="waringType">
    <el-row>
      <el-col :span="2">
        <el-radio-group v-model="radio" @change="change">
          <el-radio :label="1">分户</el-radio>
          <el-radio :label="2">分区</el-radio>
          <el-radio :label="3">分类</el-radio>
          <!-- <el-radio :label="4">分项</el-radio> -->
        </el-radio-group>
      </el-col>
      <el-col :span="11">
        <radar-chart
          :selectedMode="selectedMode"
          :radarData="radarData"
          @clickPie="clickPie"
        />
      </el-col>
      <el-col :span="11">
        <pie-chart :pieData="pieList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import radarChart from "@/views/statistics/winddirection/components/radarChart.vue";
import pieChart from "@/views/statistics/winddirection/components/pieChart.vue";
export default {
  dicts: ["energy_subarea_child_type", "subentry_type"],
  name: "waringTypeStatic",
  props: {
    // 雷达图数据
    radarData: {
      type: Array,
      default: [],
    },
    // 饼图数据
    pieData: {
      type: Array,
      default: [],
    },
  },
  components: {
    radarChart,
    pieChart,
  },
  watch: {
    pieData: {
      handler(val) {
        this.pieList = val;
      },
      deep: true,
    },
  },
  data() {
    return {
      pieList: [],
      show: false,
      radio: 2,
      selectedMode: "single",
    };
  },
  methods: {
    change(val) {
      this.$emit("change", val);
      if (this.radio === 2 || this.radio === 3) {
        this.selectedMode = "single";
      } else {
        this.selectedMode = "";
      }
    },
    subDict(val, dict) {
      let data = this.dict.type[dict].find((item) => item.value == val);
      return data?.label || "";
    },
    clickPie(val) {
      let that = this;
      if (this.radio === 2 || this.radio === 3) {
        let dict =
          this.radio === 2
            ? "energy_subarea_child_type"
            : this.radio === 3
            ? "subentry_type"
            : null;
        console.log(dict);
        that.pieList = val.data.children.map((it) => {
          it.name = that.subDict(it.nameType, dict);
          return it;
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-radio {
  padding: 15px;
}
</style>
